import React, {useState} from 'react'

// antd-mobile
import {Tabs,} from 'antd-mobile'

import '../../../../../layouts/TabWithCustomUnderline/TabWithCustomUnderline.css'
import BlingIcon from "../../../../../res/images/web/Tabs/star@2x.png";
import juxing from "../../../../../res/images/web/game-room/矩形@2x.png"
import juxingAt from "../../../../../res/images/web/game-room/矩形@2x (1).png"

const GameRoomTab = props => {

    const DefaultTabBar = Tabs.DefaultTabBar

    const {
        // history,
        tabs,
        children,
        prefixCls,
        onChange,
        tabBarBackgroundColor,
        tabBarActiveTextColor,
        tabBarInactiveTextColor,
        tabBarUnderlineStyle,
        noUnderline,
        prerenderingSiblingsNumber,
        animated,
        initialPage,
        destroyInactiveTab,
        page,
        onTabClick,
    } = props

    const [tabData, setTabData] = useState(tabs)

    const t = tabData.map((data, index) => {
        let activeTemplate
        let normalTemplate
        if (data.title === '小应分析') {
            activeTemplate = (
                <div style={{position: 'relative', color: '#FFFFFF', fontWeight: 600,}}>
                    {data.title}
                    {/*<img src={BlingIcon} alt='active-icon'*/}
                    {/*     style={{*/}
                    {/*         position: 'absolute',*/}
                    {/*         right: '-20px',*/}
                    {/*         top: '0',*/}
                    {/*         height: 20,*/}
                    {/*         width: 20,*/}
                    {/*     }}*/}
                    {/*/>*/}
                    <img
                        src={juxingAt}
                        alt=''
                        style={{
                            position: 'absolute',
                            top: 0,
                            left: '50%',
                            transform: 'translateX(-50%)',
                            width: 130,
                            height: 38,
                            zIndex: -1,
                        }}
                    />
                </div>
            )
            normalTemplate = (
                <div style={{color: '#FFFFFF', fontWeight: 600,}}>
                    {data.title}
                    <img
                        src={juxing}
                        alt=''
                        style={{
                            position: 'absolute',
                            top: 0,
                            left: '50%',
                            transform: 'translateX(-50%)',
                            width: 130,
                            height: 38,
                            zIndex: -1,
                        }}
                    />
                </div>
            )
        } else {
            activeTemplate = (
                <>
                    {data.title}
                </>
            )
            normalTemplate = (<>{data.title}</>)
        }

        const title = data.active ? activeTemplate : normalTemplate
        return {title,}
        // const activeTemplate = (
        //     <div className='basic-tab-layout-tab-active'>
        //         {data.title}
        //         <img className='basic-tab-layout-tab-active-icon' src={BlingIcon} alt='active-icon'/>
        //     </div>
        // )
        // const normalTemplate = (<div className='basic-tab-layout-tab'>{data.title}</div>)
        // const title = data.active ? activeTemplate : normalTemplate
        // return {title,}
    })

    const switchStyle = (index, tab) => {
        onTabClick(index, tab)
        const tD = [...tabData]
        tD[index].active = true
        tD.forEach((d, i) => {
            d.active = i === index
        })
        setTabData(tD)
    }


    const renderTabBar = (props) => {
        return (
            <DefaultTabBar
                {...props}
                renderUnderline={ulProps => {
                    const {style, ...otherProps} = ulProps
                    const ulStyle = {
                        ...style,
                        border: 'none',
                    }
                    // if (noUnderline === 'true' || props.activeTab === 2) {
                    //     return null
                    // }
                    return (
                        <div style={ulStyle} {...otherProps}>
                            <div
                                style={tabBarUnderlineStyle}
                                className='go-back-tab-underline'
                            />
                        </div>
                    )
                }}
            />
        )
    }

    const cls = prefixCls ? `${prefixCls} am-tabs` : 'am-tabs'

    return (
        <Tabs
            tabBarBackgroundColor={tabBarBackgroundColor}
            tabs={t}
            tabBarActiveTextColor={tabBarActiveTextColor ? tabBarActiveTextColor : '#333'}
            tabBarInactiveTextColor={tabBarInactiveTextColor? tabBarInactiveTextColor : '#aaa'}
            prefixCls={cls}
            renderTabBar={(props) => renderTabBar(props, prefixCls)}
            swipeable={false}
            onChange={onChange}
            // onTabClick={onTabClick}
            prerenderingSiblingsNumber={prerenderingSiblingsNumber ? prerenderingSiblingsNumber : 0}
            destroyInactiveTab={destroyInactiveTab}
            animated={animated}
            initialPage={initialPage ? initialPage : 0}
            // goToTab={(i) => {console.log(i)}}
            page={page}
            onTabClick={(tab, index) => {
                switchStyle(index, tab)
            }}
        >
            {children}
        </Tabs>
    )

}
export default GameRoomTab
